import { EditorPanelProps, ComponentData, PropertyEditorInfo } from "maishu-jueying";
import React = require("react");
import { ProductInfo } from "components/product-info/component";
import { categoryIdProp, nameProp, priceProp, skuProp, brandIdProp, titleProp, imageCoverProp, argumentsProp, fieldsProp } from "components/product-info/editor";
// import { componentRenders } from "controls/design-view";

export function productInfoComponentRender(propEditors: PropertyEditorInfo[]): JSX.Element {
    let categoryEditor = propEditors.filter(o => o.prop == categoryIdProp)[0];
    let nameEditor = propEditors.filter(o => o.prop == nameProp)[0];
    let priceEditor = propEditors.filter(o => o.prop == priceProp)[0];
    let skuEditor = propEditors.filter(o => o.prop == skuProp)[0];
    let brandEditor = propEditors.filter(o => o.prop == brandIdProp)[0];
    let titleEditor = propEditors.filter(o => o.prop == titleProp)[0];
    let imageCoverEditor = propEditors.filter(o => o.prop == imageCoverProp)[0];
    let fieldsEditor = propEditors.filter(o => o.prop == fieldsProp)[0];
    let argumentsEditor = propEditors.filter(o => o.prop == argumentsProp)[0];

    console.assert(categoryEditor != null);
    console.assert(nameEditor != null);
    console.assert(priceEditor != null);
    console.assert(skuEditor != null);
    console.assert(brandEditor != null);
    console.assert(brandEditor != null);
    console.assert(imageCoverEditor != null);
    console.assert(fieldsEditor != null);
    console.assert(argumentsEditor != null);

    return <div className="productInfo-editor">
        <div className="form-group clearfix">
            <div className="col-md-6">
                <div className="name pull-left">{categoryEditor.displayName}</div>
                <div className="control pull-left">{categoryEditor.editor}</div>
            </div>
            <div className="col-md-6">
                <div className="name pull-left">{nameEditor.displayName}</div>
                <div className="control pull-left">{nameEditor.editor}</div>
            </div>
        </div>
        <div className="form-group clearfix">
            <div className="col-md-6">
                <div className="name pull-left">{priceEditor.displayName}</div>
                <div className="control pull-left">{priceEditor.editor}</div>
            </div>
            <div className="col-md-6">
                <div className="name pull-left">{skuEditor.displayName}</div>
                <div className="control pull-left">{skuEditor.editor}</div>
            </div>
        </div>
        <div className="form-group clearfix">
            <div className="col-md-6">
                <div className="name pull-left">{brandEditor.displayName}</div>
                <div className="control pull-left">{brandEditor.editor}</div>
            </div>
            <div className="col-md-6">
                <div className="name pull-left">{titleEditor.displayName}</div>
                <div className="control pull-left">{titleEditor.editor}</div>
            </div>
        </div>
        <div className="form-group clearfix">
            <div className="col-md-6">
                <div className="name pull-left">{imageCoverEditor.displayName}</div>
                <div className="pull-left image-cover">{imageCoverEditor.editor}</div>
            </div>
        </div>
        <hr />
        <div className="form-group clearfix">
            <div className="col-md-12">
                {fieldsEditor.editor}
            </div>
        </div>
        <hr />
        <div className="form-group clearfix">
            <div className="col-md-12">
                {argumentsEditor.editor}
            </div>
        </div>
    </div>
}
// export let editorPanelRender: EditorPanelProps["customRender"] =
//     (editComponents: ComponentData[], propEditors: { group: string; prop: string; displayName: string; editor: React.ReactElement<any>; }[]) => {
//         if (editComponents[0].type != ProductInfo.name) {
//             return
//         }

//         let categoryEditor = propEditors.filter(o => o.prop == categoryIdProp)[0];
//         let nameEditor = propEditors.filter(o => o.prop == nameProp)[0];
//         let priceEditor = propEditors.filter(o => o.prop == priceProp)[0];
//         let skuEditor = propEditors.filter(o => o.prop == skuProp)[0];
//         let brandEditor = propEditors.filter(o => o.prop == brandIdProp)[0];
//         let titleEditor = propEditors.filter(o => o.prop == titleProp)[0];
//         let imageCoverEditor = propEditors.filter(o => o.prop == imageCoverProp)[0];
//         let fieldsEditor = propEditors.filter(o => o.prop == fieldsProp)[0];
//         let argumentsEditor = propEditors.filter(o => o.prop == argumentsProp)[0];

//         console.assert(categoryEditor != null);
//         console.assert(nameEditor != null);
//         console.assert(priceEditor != null);
//         console.assert(skuEditor != null);
//         console.assert(brandEditor != null);
//         console.assert(brandEditor != null);
//         console.assert(imageCoverEditor != null);
//         console.assert(fieldsEditor != null);
//         console.assert(argumentsEditor != null);

//         return <div className="productInfo-editor">
//             <div className="form-group clearfix">
//                 <div className="col-md-6">
//                     <div className="name pull-left">{categoryEditor.displayName}</div>
//                     <div className="control pull-left">{categoryEditor.editor}</div>
//                 </div>
//                 <div className="col-md-6">
//                     <div className="name pull-left">{nameEditor.displayName}</div>
//                     <div className="control pull-left">{nameEditor.editor}</div>
//                 </div>
//             </div>
//             <div className="form-group clearfix">
//                 <div className="col-md-6">
//                     <div className="name pull-left">{priceEditor.displayName}</div>
//                     <div className="control pull-left">{priceEditor.editor}</div>
//                 </div>
//                 <div className="col-md-6">
//                     <div className="name pull-left">{skuEditor.displayName}</div>
//                     <div className="control pull-left">{skuEditor.editor}</div>
//                 </div>
//             </div>
//             <div className="form-group clearfix">
//                 <div className="col-md-6">
//                     <div className="name pull-left">{brandEditor.displayName}</div>
//                     <div className="control pull-left">{brandEditor.editor}</div>
//                 </div>
//                 <div className="col-md-6">
//                     <div className="name pull-left">{titleEditor.displayName}</div>
//                     <div className="control pull-left">{titleEditor.editor}</div>
//                 </div>
//             </div>
//             <div className="form-group clearfix">
//                 <div className="col-md-6">
//                     <div className="name pull-left">{imageCoverEditor.displayName}</div>
//                     <div className="pull-left image-cover">{imageCoverEditor.editor}</div>
//                 </div>
//             </div>
//             <hr />
//             <div className="form-group clearfix">
//                 <div className="col-md-12">
//                     {fieldsEditor.editor}
//                 </div>
//             </div>
//             <hr />
//             <div className="form-group clearfix">
//                 <div className="col-md-12">
//                     {argumentsEditor.editor}
//                 </div>
//             </div>
//         </div>
//     }